<template>
  <div class="home">
    <div class="left">
      <nav>
        <p v-for ="(item,index) in navlist"
        :key="item.title"
        @click="changeCur(index)"
        :class="{active:index === curindex}">
        {{item.title}}
        </p>
      </nav>
      <div class="nav_con">
        <h4>{{curtitle}}</h4>
        <ul>
          <li v-for="(ite) in curCen" :key="ite.text">
            <router-link :to="ite.path">
            {{ite.text}}
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <p>名字 | <span>退出</span> </p>
        <div class="riht_nav">
          <p v-for="(vv, index) in topNav"
          :key = "vv.path">
          <router-link :to="vv.path">{{vv.text}}</router-link>
          <span @click.prevent="remove(vv.path, index)">X</span>
          </p>
        </div>
      </div>
      <main>
        <router-view/>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      curindex: 0,
      navlist: [
        {
          title: '资金管理',
          child: [
            {
              text: '资金组成',
              path: '/compose'
            },
            {
              text: '资金流向',
              path: '/tomoney'
            },
            {
              text: '资金来源',
              path: '/frommoney'
            }
          ]
        },
        {
          title: '系统管理',
          child: [
            {
              text: '用户管理',
              path: '/user'
            }
          ]
        }
      ],
      // 中间数据 tab切换谁渲染谁下的数据
      cenList: [],
      curtitle: '', // 修改当前路由的title
      topNav: []
    }
  },
  methods: {
    changeCur (index) {
      if (this.cur === index) return
      this.curindex = index
      // tab切换是跳转第一个
      this.$router.push(this.curCen[0].path)
    },
    remove (path, index) {
      // 如果删除的是当前路由,高亮就跳转到下一个路由
      if (path === this.$route.path) {
        // 如果删除的是第一个高亮就调倒最后一个
        if (index === 0) {
          this.$router.push(this.topNav[index + 1])
          if (this.topNav.length === 1) {
            this.topNav.splice(index, 1)
            localStorage.removeItem('token')
            this.$router.push('/login')
            return
          }
        } else {
          // 向前添加高亮
          this.$router.push(this.topNav[index - 1])
        }
      }
      this.topNav.splice(index, 1)
    }
  },
  computed: {
    // 计算属性：根据当前高亮下标渲染下面的子元素
    curCen () {
      return this.navlist[this.curindex].child
    }
  },
  watch: {
    $route: {
      handler () {
        // 根据当前地址找到在navlist中的下标
        this.navlist.forEach((item, index) => {
          item.child.forEach(val => {
            if (val.path === this.$route.path) {
              this.curindex = index
            }
          })
        })
        // 根据当前路由地址在curcen中查找对应的数据
        const cur = this.curCen.find(item => item.path === this.$route.path)
        // console.log(cur)
        this.curtitle = cur.text
        // 如果顶部数组中不存在该项路由则添加进该数组
        if (!this.topNav.find(item => item.path === this.$route.path)) {
          this.topNav.push(cur)
        }
      },
      immediate: true // 进入页面立马执行
    }
  }
}
</script>

<style lang="less" scoped>
.home{
  width: 100%;
  height: 100%;
  display: flex;
}
.left{
  width: 250px;
  display: flex;
  nav{
    width: 100px;
    background: #031b36;
    padding-top: 100px;
    p{
      width: 100%;
      height: 100px;
      line-height: 100px;
      color: #9999;
      text-align: center;
    }
    .active {
      color: #ffffff;
      background: #012956;
      border-left: 1px solid #ffffff;
    }
  }
  .nav_con{
    flex: 1;
    background: #012956;
    h4{
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #ffffff;
      border-bottom: 1px solid #eeeeee;
    }
    ul{
      li{
        line-height: 50px;
        text-align: center;
      }
      a {
        color: #999999;
        display: block;
        border-right: 6px solid transparent;
        text-decoration: none;
      }
      .router-link-active {
        color: #ffffff;
        border-right: 6px solid steelblue;
      }
    }
  }
}
.right{
  flex: 1;
  flex-direction: column;
  .top{
    position: relative;
    >p{
      position: absolute;
      right: 10px;
      top: 10px;
    }
    .riht_nav{
      padding-top: 50px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      display: flex;
      >p{
        width: 130px;
        height: 40px;
        // padding: 5px 25px;
        margin: 0px 5px;
        border: 1px solid #ccc;
        position: relative;
        span{
          position: absolute;
          right: 2px;
          top: 0;
        }
      }
      a{
        text-decoration: none;
        color: #999;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 40px;
      }
      .router-link-active {
      background: #dddddd;
      }
    }
  }
  main{
    padding: 30px;
    font-family: '楷体';
    font-size: 20px;
  }
}
</style>
